<template>
  <el-drawer title="详情" :visible.sync="visible" :wrapperClosable="false"
             size="1000px" append-to-body class="JNPF-common-drawer"
  >
    <div class="JNPF-flex-main">
      <div class="dynamicForm dynamicDetail">
        <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-card class="mb-20" shadow="always" header="卡片容器">
                <el-col :span="8">
                  <el-form-item label="报修时间"
                                prop="repairTime"
                  >
                    <p>{{ dataForm.repairTime }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="报修类型"
                                prop="repairType"
                  >
                    <p>{{ dataForm.repairType | dynamicText(repairTypeOptions) }} </p>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="报修来源"
                                prop="repairSource"
                  >
                    <p>{{ dataForm.repairSource | dynamicText(repairSourceOptions) }} </p>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="项目id"
                                prop="projectId"
                  >
                    <p>{{ dataForm.projectId | dynamicText(projectIdOptions) }} </p>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="资产id"
                                prop="assetId"
                  >
                    <p>{{ dataForm.assetId | dynamicText(assetIdOptions) }} </p>
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-divider content-position="center">

              </el-divider>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="15">
                <el-col :span="16">
                  <el-form-item label="报修地址"
                                prop="repairAddress"
                  >
                    <p>{{ dataForm.repairAddress }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="期望上门时间" label-width="150px"
                                prop="expectedVisitTime"
                  >
                    <p>{{ dataForm.expectedVisitTime }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请方"
                                prop="applicantInfo"
                  >
                    <p>{{ dataForm.applicantInfo }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请人"
                                prop="applicantUser"
                  >
                    <p>{{ dataForm.applicantUser }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="电话"
                                prop="phone"
                  >
                    <p>{{ dataForm.phone }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="报修说明"
                                prop="repairRemark"
                  >
                    <p>{{ dataForm.repairRemark }}</p>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </template>
        </el-form>
      </div>
      <div class="drawer-footer">
        <el-button @click="visible = false"> 取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import request from '@/utils/request'
import PrintBrowse from '@/components/PrintBrowse'
import jnpf from '@/utils/jnpf'

export default {
  components: { PrintBrowse },
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: '',
      dataForm: {
        id: '',
        repairTime: '10:57:51',
        repairType: '',
        repairSource: '',
        projectId: '',
        assetId: '',
        repairAddress: '',
        expectedVisitTime: '',
        applicantInfo: '',
        applicantUser: '',
        phone: '',
        repairRemark: ''
      },
      repairTypeOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      repairSourceOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      projectIdOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      assetIdOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }]

    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {
  },
  methods: {
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.repairType = _dataAll.repairType ? JSON.parse(_dataAll.repairType) : []
      _dataAll.repairSource = _dataAll.repairSource ? JSON.parse(_dataAll.repairSource) : []
      _dataAll.projectId = _dataAll.projectId ? JSON.parse(_dataAll.projectId) : []
      _dataAll.assetId = _dataAll.assetId ? JSON.parse(_dataAll.assetId) : []
      this.dataForm = _dataAll
    },

    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/property/repair/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    }
  }
}

</script>
